<template>
  <view class="container">
    <up-navbar
        :autoBack="true"
        :placeholder="false"
        title=""
        bgColor="transparent"
    >
    </up-navbar>
    <view class="top_cnt bg_set">
      <up-status-bar></up-status-bar>

      <view class="ph_text">
        <view class="text_4_44">福宝elife排行榜</view>
        <view class="text_5_24 ">真实排行数据 权威甄选</view>
      </view>

      <view
          class="l_f_r top_tab_cnt">
        <view v-for="(it,index) in topTabs" class="top_it flex_1 l_f_r_c_c text_4_26"
              :class="{active:topTabActveIndex==index}" @click="handleChangeTopTab(index)">{{ it.name }}
        </view>
      </view>

    </view>
    <template v-if="topTabActveIndex==0">
      <view class="x_cnt">
        <XScroll :list="shopType" gap="40rpx">
          <template v-slot="{ item }">
            <view class="item_c l_f_c text_4_28" :class="{active:shopTypeActiveID==item.ID}"
                  @click.stop="shopTypeChange(item.ID)">
              {{ item.name }}
              <view class="xian" v-if="shopTypeActiveID==item.ID"></view>

            </view>


          </template>
        </XScroll>
      </view>
      <empty v-if="!shopList.length"></empty>
      <view class="list">
        <view class="item l_f_r " v-for="(item,index) in shopList">
          <view class="sort_bg bg_set" :style="{ backgroundImage: `url(${isH5+shopSortImg[index>=3?3: index]})` }">
            <view class="num l_f_r_c_c" v-if="index>=3">{{ index + 1 }}</view>
          </view>
          <view class="ductarow ">

            <image class="cover" :src="item.img" mode="aspectFill"
                   @click.stop="$goURl(`/pages/commodity/details?id=${item.ID}`)">
            </image>
          </view>

          <view class="right flex_1">
            <view class="ductbrow text_5_28 textsl2"
                  @click.stop="$goURl(`/pages/commodity/details?id=${item.ID}`)">
              {{ item.name }}
            </view>
            <view class="lsjf text_c_r text_4_20">
              送{{ getDiscountJf(item) }}绿色积分
            </view>
            <view class="text_c_8f l_f_r l_al_c text_5_24 text_c_r">
              <image class="huo" src="https://pili-vod.guanxikeji.com/fubao/img/1755327306397.png" mode="aspectFill"
              >
              </image>
              <text>elife</text>
              <text>|</text>
              <text>销量</text>
              <text>{{ item.sales }}</text>

            </view>

            <view class="ductdrow box_db l_f_r_sb_c">
              <view class="ductdrowa l_al_e"
                    @click.stop="$goURl(`/pages/commodity/details?id=${item.ID}`)">
                <text class="text_4_24 ">￥</text>
                {{ $toFiexd(item.price) }}
              </view>
              <view class="ductdrowb l_f_r_c_c" @click="bindChange(item,index,1)">
                <image class="addImg" src="https://img.fubaozx.cn/static/newImg/categoryImg2.png"></image>
              </view>
            </view>
          </view>
        </view>
      </view>

    </template>
    <template v-else-if="topTabActveIndex==1">
      <empty v-if="!topicLikeList.length"></empty>

      <view class="list">

        <view class="item like_item l_f_r " v-for="(item,index) in topicLikeList" @click="handleGoDetali(item)">

          <view class="ductarow ">
            <view class="cover" v-if="item.code==1||item.video">
              <video class="video" :src="item.video&&item.video.split(',')[0]"
                     :autoplay="true"
                     :muted="true"
                     :controls="false"
                     :show-center-play-btn="false"

              ></video>
            </view>
            <image class="cover" v-else :src="item.img&&item.img.split(',')[0]||$defaultAvatar" mode="aspectFill">


            </image>
          </view>
          <view class="sort_bg bg_set" :style="{ backgroundImage: `url(${isH5+shopSortImg[index>=3?3: index]})` }">
            <view class="num l_f_r_c_c" v-if="index>=3">{{ index + 1 }}</view>
          </view>
          <!--          <cover-image class="sort_bg bg_set"  :src="shopSortImg[index>=3?3: index]" >-->
          <!--            <cover-view class="num l_f_r_c_c" v-if="index>=3">{{ index + 1 }}</cover-view>-->
          <!--          </cover-image>-->
          <view class="right flex_1">
            <view class="brief text_4_26 text_c_2d">{{ item.brief }}</view>
            <view class="l_f_r_sb_c item_msg">
              <view class="user l_f_r_c_c">
                <image class="avatar" :src="item.user.hwad||$defaultAvatar">
                </image>
                <text class=" text_5_24 text_c_2d">{{ item.user.nickname || '密名用户' }}</text>
              </view>
              <view class="l_f_r text_4_26" style="gap: 10rpx">
                <text class="text_c_2d">点赞量</text>
                <text class="text_c_2d" style="color:#FF4A01;">{{ item.thumbs_up }}</text>
              </view>
            </view>

          </view>
        </view>
      </view>
    </template>
    <template v-else-if="topTabActveIndex==2">
      <empty v-if="!rewardList.length"></empty>

      <view class="top_1_3 l_f_r_sb_c l_al_e" v-if="false">

        <view class="it_top bg_set  " :class="[`it${index}`]" v-for="(item, index) in showRewardList.topList"
              :key="index">
          <view class="img_cnt">
            <view class="pm">
              <image class="pm_img" :src="hgImg[index]">
              </image>
            </view>
            <image class="avatar" :src="item.hwad||$defaultAvatar">
            </image>
          </view>
          <view class="l_f_r_c_c fc">一起发财吧</view>
          <view class="l_f_r_sb_c text_4_24">
            <text>打赏</text>
            <text>260</text>
          </view>
          <view class="l_f_r_sb_c text_4_24">
            <text>总消费</text>
            <text>260</text>
          </view>
        </view>

      </view>
      <view class="fc_list">
        <view class="it l_f_r_sb_c" v-for="(item,index) in rewardList">
          <view class="text_5_32 yhImg_cnt l_f_r_c_c">
            <image class="yhImg" v-if="index<3" :src="yhImg[index]"/>
            <text v-else>
              {{ index + 1 }}
            </text>
          </view>
          <image class="avatar" :src="item.hwad||$defaultAvatar">
          </image>
          <view class="flex_1 l_f_c  ">
            <view class="text_b_28">坐看庭前日落</view>
            <view class="l_f_r l_al_c text_4_24 text_c_2d">
              <text>打赏</text>
              <text class="text_c_f4">260</text>
              <text>|</text>
              <text>总消费</text>
              <text class="text_c_f4">260</text>
            </view>
          </view>


        </view>
      </view>
    </template>
    <view style="height: 100rpx;"></view>
  </view>
</template>

<script setup lang="ts">
import XScroll from "@/components/XScroll.vue";

const {proxy} = getCurrentInstance()
const topTabActveIndex = ref(0)
const topTabs = ref([
  {
    name: '商品销量榜',
  },
  {
    name: '话题点赞榜',
  },
  {
    name: '用户打赏榜',
  },
])
const handleChangeTopTab = (index: number) => {
  topTabActveIndex.value = index
}
const getDiscountJf = (item) => {
  if (item.discount > 0) {
    return ((Number(item.price) * Number(item.discount / 100))).toFixed(4)
  } else {
    return 0
  }

}
//用户打赏榜
const rewardList = ref([])
const showRewardList = computed(() => {
  const topList = []
  const list = []
  for (let i = 0; i < rewardList.value.length; i++) {
    topList.push(rewardList.value[i])
  }
  for (let i = 3; i < rewardList.value.length; i++) {
    list.push(rewardList.value[i])
  }
  return {
    topList,
    list
  }
})
const getReward = () => {
  proxy.$request({
    url: `api/getArticleList/?sort=1&page=1&size=10`,
    method: 'GET',
    success: (res) => {
      if (res.errno == 0) {
        console.log("res", res)
        rewardList.value = res.data.data
      }
    }
  })
}

const hgImg = [
  'https://pili-vod.guanxikeji.com/fubao/img/1755332197724.png',
  'https://pili-vod.guanxikeji.com/fubao/img/1755332210393.png',
  'https://pili-vod.guanxikeji.com/fubao/img/1755332221006.png',
]
const yhImg = [
  'https://img.fubaozx.cn/static/newImg/rankingListImg5.png',
  'https://img.fubaozx.cn/static/newImg/rankingListImg6.png',
  'https://img.fubaozx.cn/static/newImg/rankingListImg7.png',
]

//话题点赞榜
const handleGoDetali = (item) => {
  proxy.$goURl(`/pages/community/details?id=${item.ID}&code=${item.code}`)
}
const topicLikeList = ref([])
const getTopicLike = () => {
  proxy.$request({
    url: `api/getArticleList/?sort=1&page=1&size=10`,
    method: 'GET',
    success: (res) => {
      if (res.errno == 0) {
        console.log("res", res)
        topicLikeList.value = res.data.data
      }
    }
  })
}

// 商品分类
const shopSortImg = [
  'https://img.fubaozx.cn/static/newImg/rankingListImg1.png',
  'https://img.fubaozx.cn/static/newImg/rankingListImg2.png',
  'https://img.fubaozx.cn/static/newImg/rankingListImg3.png',
  'https://img.fubaozx.cn/static/newImg/rankingListImg4.png',
]
const shopList = ref([])
const shopType = ref([])
const shopTypeActiveID = ref(0)
const shopTypeChange = (id: number) => {
  shopTypeActiveID.value = id
  getdatas()
}

function secondary() {
  proxy.$request({
    url: `api/typeList/`,
    method: 'GET',
    success: (res) => {
      if (res.errno == 0) {
        let datae = res.data.class_first
        datae.unshift({
          name: '全部',
          ID: 0,
        })
        shopType.value = datae

        getdatas()
      }

    }
  })
}

// 获取数据
function getdatas() {
  proxy.$request({
    url: `api/goods_list_all/${shopTypeActiveID.value}/?class_second_id=-1&page=${1}&size=${10}&sort=0&is_single=0`,
    method: 'GET',
    success: (res) => {
      const datas = res.data.data
      console.log("res", res)
      if (res.errno == 0) {
        shopList.value = datas
      } else {
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
      }
    }
  })
}

// 点击加入购物车图片
function bindChange(item, index, e) {
  proxy.$request({
    url: `api/goods_list_all/0/`,
    method: 'POST',
    data: {
      id: item.ID
    },
    success: (res) => {
      if (res.errno == 0) {

        shoppingCart(res.data.attribute_list[0].ID)

      }
    }
  })
}

function shoppingCart(id) {

  proxy.$request({
    url: `api/shoppingCart/`,
    method: 'POST',
    data: {
      attribute_id: id,
      number: 1
    },
    success: (res) => {
      if (res.errno == 0) {
        uni.showToast({
          icon: 'none',
          title: '加入购物车成功'
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: res.errmsg
        })
      }

    }
  })
}

onLoad(() => {
  secondary()
  getTopicLike()
  getReward()
})
const isH5 = ref('')
// #ifdef H5
// isH5.value = '/h5'
// #endif
</script>


<style scoped lang="scss">
.container {
  background-image: url("https://img.fubaozx.cn/static/newImg/rankingListBg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.top_cnt {
  //background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755322968046.png");
  width: 750rpx;
  padding-top: 1rpx;
  box-sizing: border-box;

  .ph_text {
    margin-top: 90rpx;
    margin-left: 80rpx;

    .text_4_44 {
      font-weight: bold;
      font-size: 44rpx;
    }

    .text_5_24 {
      color: #3D3D3D;
      margin-left: 24rpx;
      margin-top: 10rpx;
    }
  }

  .top_tab_cnt {
    width: 690rpx;
    height: 72rpx;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 120rpx 120rpx 120rpx 120rpx;
    margin: 56rpx auto 0;

    .top_it {
      height: 72rpx;

      &.active {
        background: #FFFFFF;
        border-radius: 120rpx 120rpx 120rpx 120rpx;
        color: #F67800;
      }
    }
  }
}

.x_cnt {
  padding: 28rpx;

  .item_c {
    position: relative;
    height: 50rpx;
    white-space: nowrap;


    .xian {
      position: absolute;
      left: 0;
      bottom: 0rpx;
      width: 100%;
      height: 4rpx;
      background: #000;
    }
  }
}

.list {
  .item {
    width: 690rpx;
    height: 254rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 26rpx 16rpx;
    box-sizing: border-box;
    margin: 34rpx auto;
    position: relative;

    .sort_bg {
      position: absolute;
      z-index: 1;
      top: -10rpx;
      width: 64rpx;
      height: 64rpx;

      .num {
        margin-top: 10rpx;
        margin-right: 12rpx;
        width: 50rpx;
        color: #2D2D2D;
        background-color: #e8e8e8;
      }
    }

    .ductarow {
      margin-right: 16rpx;

      .cover {
        width: 222rpx;
        height: 222rpx;

        .video {
          width: 100%;
          height: 100%;
        }
      }


    }

    .right {
      overflow: hidden;
    }

    .ductbrow {
      word-wrap: break-word;
      color: #2D2D2D;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      width: 100%;
    }

    .ductcrow {
      font-weight: 400;
      font-size: 20rpx;
      color: #7AA048;
    }

    .text_c_8f {
      margin: 30rpx 0 0rpx;
      width: fit-content;
      height: 40rpx;
      background: linear-gradient(90deg, #FFD2D2 0%, #FFFFFF 100%);
      gap: 10rpx;
      padding: 0 10rpx;

      .huo {
        width: 22rpx;
        height: 26rpx;
      }
    }

    .box_db {
      padding: 10rpx;
    }

    .ductdrow {
      .ductdrowa {
        font-weight: bold;
        font-size: 30rpx;
        display: flex;
        justify-content: center;
        color: #F63B29;

        .text_4_24 {
          color: #F63B29;
        }
      }

      .ductdrowb {

        .addImg {
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

    .lsjf {
      height: 36rpx;
      padding: 0 10rpx;
      margin: 10rpx 0;
      width: fit-content;
      background: #FFF5E5;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      color: #C56530;
    }
  }

  .like_item {
    width: 690rpx;
    height: 280rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx #F6F6F6;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 208rpx;
    }

    .brief {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 3rem;

    }

    .item_msg {
      margin-top: 26rpx;

      .avatar {
        width: 56rpx;
        height: 56rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }
    }

  }

}

.top_1_3 {
  margin-top: 132rpx;
  padding: 0 32rpx;

  .it1 {
    order: 1;
  }

  .it2 {
    order: 3;
  }

  .it_top {
    position: relative;
    background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755333264141.png");
    width: 208rpx;
    height: 260rpx;
    padding: 0 14rpx;
    box-sizing: border-box;

    .img_cnt {
      margin: 0 auto;
      position: absolute;
      top: -48rpx;
      transform: translateX(-50%);
      left: 50%;

      .pm {
        position: absolute;
        top: -50rpx;
        left: 50%;
        transform: translateX(-50%);

        .pm_img {
          width: 46rpx;
          height: 34rpx;

        }
      }

      .avatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
    }

    .fc {
      color: #E57B0E;
      margin-top: 78rpx;
      margin-bottom: 46rpx;
    }

    .l_f_r_sb_c {
      margin-bottom: 12rpx;
    }

    &.it0 {
      order: 2;
      background-image: url("https://pili-vod.guanxikeji.com/fubao/img/1755333315211.png");
      width: 236rpx;
      height: 280rpx;

      .img_cnt {
        top: -66rpx;

      }

      .avatar {
        width: 112rpx;
        height: 112rpx;

      }

      .fc {
        color: #ED1619;
        margin-top: 98rpx;
      }
    }

  }


}

.fc_list {
  margin-top: 40rpx;

  .it {
    width: 690rpx;
    height: 144rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin: 20rpx auto;
    padding: 28rpx 30rpx;
    box-sizing: border-box;
.yhImg_cnt,
    .yhImg {
      width: 52rpx;
      height: 52rpx;
    }

    .avatar {
      width: 88rpx;
      height: 88rpx;
      margin-left: 32rpx;
      margin-right: 24rpx;
      border-radius: 50%;

    }

    .flex_1 {
      height: 88rpx;
      justify-content: space-between;
    }

    .text_4_24 {
      gap: 10rpx;
    }
  }
}

.text_c_r {
  color: #F33737;
}
.text_c_f4{
  color: #FF4A01;
}
</style>
